<template>
	<view class="">
		<view class="search-box">
			<u-search placeholder="请输入" v-model="keyword" :showAction="false" @search="onSearch"></u-search>
		</view>
		<swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000" circular indicator-dots
			indicator-color="#eee" indicator-active-color="#ff820d">
			<swiper-item class="swiper-item" v-for="item, i in banner_list" :key="i">
				<image :src="httpAddress+item" mode="" class="banner"></image>
			</swiper-item>
		</swiper>
		<view class="grid_list">
			<view v-for="(item,index) in grid_list" :key="index" class="grid_item">
				<image :src="'/static/imgs/'+item.icon" mode="" class="grid_img"></image>
				<view class="grid_name">{{item.name}}</view>
			</view>
		</view>
		<view class="input_box">
			<view class="tabs">
				<view class="tab_item" :class="{active:activeTab==0}" @click="activeTab=0">
					<text class="tab_txt" @click="activeTab=0">我要转让</text>
					<image class="active_two" src="/static/imgs/active_two.png" mode="" v-if="activeTab==1"></image>
				</view>
				<view class="tab_item" :class="{active:activeTab==1}" @click="activeTab=1">
					<text class="tab_txt" @click="activeTab=1">我要收购</text>
					<image class="active_one" src="/static/imgs/active_one.png" mode="" v-if="activeTab==0"></image>
				</view>
			</view>
			<view class="form">
				<view class="form-item" @click="show=true">
					<u--input prefixIcon="grid-fill" suffixIcon="arrow-down"
						:placeholder="`请选择要${activeTab==0?'转让':'收购'}的平台`" border="bottom" v-model="form.title" readonly
						prefixIconStyle="color:#dfe2e9" suffixIconStyle="color:#dfe2e9"></u--input>
				</view>
				<view class="form-item">
					<u--input placeholder="请输入联系人" border="bottom" prefixIcon="phone-fill" v-model="form.nickname"
						prefixIconStyle="color:#dfe2e9" clearable></u--input>
				</view>
				<view class="form-item">
					<u--input placeholder="请输入手机号" border="bottom" prefixIcon="phone-fill" v-model="form.mobile"
						prefixIconStyle="color:#dfe2e9" clearable type="number"></u--input>
				</view>
				<view class="form-item">
					<u-input placeholder="请输入验证码" border="bottom" prefixIcon="lock-fill" prefixIconStyle="color:#dfe2e9"
						clearable v-model="form.code" maxlength="6">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<u-button @tap="getCode" :text="tips" type="info" size="mini"></u-button>
						</template>
					</u-input>
				</view>
				<view class="form-item pt-30">
					<u-button shape="circle" color="#e73c15" @click="submit">免费帮我找店</u-button>
				</view>
			</view>
		</view>
		<view class="mx-20 my-30 font-34 color-3">为什么选择响当当</view>
		<view class="strength_show">
			<view class="name mb-20">响当当无忧荣膺</view>
			<view class="font-36">2022年四川省高新<br>技术企业</view>
			<view class="font-24 color-9 mt-10">企业科技创新 • 自主知识产权</view>
		</view>
		<view class="promo_list">
			<view v-for="(item,index) in promo_list" :key="index" class="promo_item">
				<view class="icon">
					<text :class="'iconfont '+item.icon"></text>
				</view>
				<view class="name mt-20 pb-30">{{item.name}}</view>
				<view class="txt  mt-30">{{item.text}}</view>
			</view>
		</view>
		<view class="mx-20 my-30 font-34 color-3 flex-c">热门资质</view>
		<view class="zz-list">
			<view class="zz_item" v-for="item,i in zzlist" :key="i" @click="goDetail(item)">
				<view class="zz_name mt-15">{{item.title}}</view>
				<view class="zz_type">资质类目：{{item.cate}}</view>
				<view class="zz_status">公司状态是否正常：<text
						:style="{'color':item.abnormaldata==0?'#95ec69':'#ff0000'}">{{item.abnormaldata==0?'是':'否'}}</text>
				</view>
				<view class="zz_price">注册资金：<text>{{item.reg_capital}}</text></view>
			</view>
		</view>
		<view class="see-more" @click="goList">
			<text>查看更多</text>
			<u-icon name="arrow-right" size="10" color="#fb9320"></u-icon>
		</view>
		<view class="mx-20 my-30 font-34 color-3 flex-c">新闻资讯</view>
		<view class="news-list">
			<view v-for="(item,index) in newslist" :key="index" class="news" @click="goNews(item.id)">
				<image src="../../static/imgs/bg.png" mode="" class="news-img"></image>
				<view class="right">
					<view class="news-title">{{item.title}}</view>
					<view class="right-bt">
						<view class="">
							<!-- <u-icon name="eye" color="#999" size="10"></u-icon>
							<text>323阅读</text> -->
						</view>
						<view class="">
							<u-icon name="clock" color="#999" size="10"></u-icon>
							<text>{{$u.timeFormat(item.createtime, 'yyyy-mm-dd')}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="see-more" style="margin: 0 auto;" @click="goNewsList">
				<text>查看更多</text>
				<u-icon name="arrow-right" size="10" color="#fb9320"></u-icon>
			</view>
		</view>
		<u-picker :show="show" :columns="columns" @cancel="show=false" @confirm="onChooseCate"></u-picker>
	</view>
</template>

<script>
	import {
		httpAddress,
		getIndex,
		sendCode,
		checkCode,
		indexFormPost
	} from '@/config/api.js'
	export default {
		data() {
			return {
				httpAddress,
				keyword: '',
				banner_list: [],
				show: false,
				columns: [],
				newslist: [],
				zzlist: [],
				grid_list: [{
					name: 'ICP转让',
					icon: 'ICP.png'
				}, {
					name: 'EDI转让',
					icon: 'EDI.png'
				}, {
					name: '文网文转让',
					icon: 'wen.png'
				}, {
					name: '公司转让',
					icon: 'company.png'
				}, {
					name: '网店转让',
					icon: 'shop.png'
				}, {
					name: '药品许可证转让',
					icon: 'yao.png'
				}, {
					name: '医疗器械转让',
					icon: 'yi.png'
				}, {
					name: '资质收购',
					icon: 'zizhi.png'
				}],
				activeTab: 0,
				form: {
					title: '',
					nickname: '',
					mobile: '',
					code: ''
				},
				tips: '获取验证码',
				promo_list: [{
						icon: 'icon-shop-',
						name: '10年网店转让',
						text: '10年行业经验沉淀，深耕网店交易服务'
					},
					{
						icon: 'icon-anquanbaozhang',
						name: '百万真实店源',
						text: '人工核实店铺信息，可靠无虚假'
					},
					{
						icon: 'icon-zijinmingxi',
						name: '资金保障',
						text: '提供买卖双方资金担保，交易更安全'
					},
					{
						icon: 'icon-w_aixin',
						name: '陪同过户',
						text: '覆盖全国300多个城市，免费陪同过户'
					},
				]
			}
		},
		onLoad() {
			this.getIndexData()
		},
		methods: {
			onSearch() {

				uni.reLaunch({
					url: '/pages/buy/buy?keyword=' + this.keyword
				})
			},
			goList() {
				uni.reLaunch({
					url: '/pages/buy/buy'
				})
			},
			// 首页数据获取
			async getIndexData() {
				const res = await getIndex()
				// console.log(res);
				if (res.code == 1) {
					this.banner_list = res.data.banner
					let cateList = []
					for (let k in res.data.cate) {
						cateList.push(res.data.cate[k])
					}
					this.columns[0] = cateList
					uni.setStorageSync('cateList', cateList)
					this.newslist = res.data.newslist
					this.zzlist = res.data.zzlist
				}
			},
			// 表单分类选择
			onChooseCate(e) {
				this.form.title = e.value[0]
				this.show = false
			},

			// 去资质详情
			goDetail(item) {
				uni.navigateTo({
					url: './detail?id=' + item.id
				})
			},
			// 去新闻详情
			goNews(id) {
				uni.navigateTo({
					url: './news?id=' + id
				})
			},
			// 去新闻列表
			goNewsList() {
				uni.navigateTo({
					url: '/pages/index/new_list'
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			// 获取验证码
			async getCode() {
				if (!uni.$u.test.mobile(this.form.mobile)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确手机号'
					})
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					const res = await sendCode({
						mobile: this.form.mobile,
						event: 'notice'
					})
					if (res.code == 1) {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			// 验证码检测
			async onCheckCode() {
				let ifPass = true
				const res = await checkCode({
					mobile: this.form.mobile,
					event: 'bind',
					captcha: this.form.code
				})
				if (res.code == 1) {
					ifPass = true
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					ifPass = false
				}
				return ifPass
			},
			// 表单提交
			async submit() {
				if (!this.form.title) {
					uni.showToast({
						icon: 'none',
						title: '请选择平台'
					})
					return
				}
				if (!this.form.nickname) {
					uni.showToast({
						icon: 'none',
						title: '请输入联系人'
					})
					return
				}
				if (!this.form.mobile) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					})
					return
				}
				if (!this.form.code) {
					uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					})
					return
				}
				// const ifPass = await this.onCheckCode()
				// if (ifPass) {
				// 	console.log('通过');
				// }
				uni.showLoading({
					mask: true,
					title: '提交中'
				})
				const res = await indexFormPost({
					type: this.activeTab == 0 ? 1 : 0,
					...this.form
				})
				uni.hideLoading()
				if (res.code == 1) {
					uni.showModal({
						title: '提示',
						content: '提交成功,请耐心等待工作人员与您联系',
						showCancel: false,
						success: (ret) => {
							for (let k in this.form) {
								this.form[k] = ''
							}
						}
					});
				} else {
					uni.showModal({
						title: '提示',
						content: res.msg,
						showCancel: false,
						success: (ret) => {

						}
					});
				}

			}

		}
	}
</script>
<style>
	page {
		background-color: #f4f5f8;
		padding-bottom: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.search-box {
		padding: 20rpx;
		background-color: #ff820d;
	}

	.swiper {
		width: 100%;
		height: 400rpx;

		.swiper-item {
			width: 100%;
			height: 100%;

			.banner {
				width: 100%;
				height: 100%;
			}
		}
	}

	.grid_list {
		background-color: #fff;
		transform: translateY(-20rpx);
		border-radius: 20rpx 20rpx 0 0;
		display: flex;
		align-content: center;
		justify-content: space-around;
		flex-wrap: wrap;
		padding-top: 50rpx;
		overflow: hidden;

		.grid_item {
			.grid_img {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 15rpx;
			}

			margin-bottom: 50rpx;
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			color: #333;
		}
	}

	.input_box {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 20rpx;

		.tabs {
			border-radius: 20rpx 20rpx 0 0;
			display: flex;
			align-items: center;

			.tab_item {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30rpx;
				color: #333;
				height: 100rpx;
				position: relative;

				.tab_txt {
					z-index: 9;
				}

				.active_one,
				.active_two {
					position: absolute;
					top: 0;
					display: block;
					width: 110%;
					height: 100%;

				}

				.active_one {
					right: -1px;
				}

				.active_two {
					left: 0;
				}
			}

			.active {
				font-size: 32rpx;
				position: relative;

				::after {
					content: '';
					display: block;
					width: 40rpx;
					height: 8rpx;
					background-color: #e73c15;
					border-radius: 8rpx;
					position: absolute;
					bottom: 5rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		.form {
			padding: 20rpx 40rpx;

			.form-item {
				margin: 38rpx;
			}
		}
	}

	.strength_show {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 20rpx;
		color: #fff;

		height: 33.6vw;
		margin-top: 2.6667vw;
		padding: 3.9vw 0 0 4.8vw;
		background: url('https://wap.yidian51.com/cdn/img/icon_zs14.abdbf89.png') no-repeat;
		background-size: 100%;

		.name {
			padding: 10rpx;
			border-radius: 10rpx;
			padding: 8rpx;
			width: fit-content;
			font-size: 18rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #e2242c;
		}
	}

	.promo_list {

		display: flex;

		justify-content: space-between;

		flex-wrap: wrap;
		margin: 20rpx;

		.promo_item {
			box-sizing: border-box;
			width: 49%;
			height: 44.2667vw;
			padding: 5.3333vw 4vw 0;
			margin-top: 1.3333vw;
			background: #fefefe;
			border-radius: 2.6667vw;

			.icon {
				width: 60rpx;
				height: 60rpx;
				background: #fff4f4;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;

				.iconfont {
					color: #ff8641;
					font-size: 40rpx;
				}


			}

			.name {
				color: #3f3f3f;
				font-size: 30rpx;
				border-bottom: 1px solid #e6e6e6;
			}

			.txt {
				color: #979797;
				font-size: 24rpx;
			}
		}
	}

	.zz-list {
		margin: 30rpx 20rpx;

		.zz_item {
			background-color: #fff;
			// background-image: linear-gradient(to right bottom, #fc9421, #fff);
			border-radius: 20rpx;
			padding: 20rpx 40rpx;

			box-shadow: -1px -2px 15px #fb9320;
			margin-bottom: 30rpx;

			.zz_name {
				margin-bottom: 20rpx;
				font-size: 30rpx;
				font-weight: 600;
				color: #333;
			}

			.zz_type {
				font-size: 26rpx;
				color: #999;
				margin-bottom: 20rpx;
			}

			.zz_status {
				font-size: 26rpx;
				color: #999;
				margin-bottom: 20rpx;
			}

			.zz_price {
				text-align: right;

				text {
					font-weight: 600;
					color: #e2242c;
				}
			}
		}
	}

	.see-more {
		width: 300rpx;
		height: 100rpx;
		font-size: 28rpx;
		color: #fb9320;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 40rpx auto;
		border-radius: 50rpx;
	}

	.news-list {
		margin: 30rpx 20rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 0 30rpx;

		.news {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			border-bottom: 1px solid #f8f8f8;

			&:last-child {
				border: 0;
			}

			.news-img {
				width: 200rpx;
				height: 120rpx;
				border-radius: 10rpx;
			}

			.right {
				flex: 1;
				overflow: hidden;
				margin-left: 20rpx;
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.news-title {
					font-size: 28rpx;
					color: #333;
				}

				.right-bt {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #999;
					font-size: 20rpx;

					view {
						display: flex;
						align-items: center;
					}
				}
			}
		}
	}
</style>